<template>
  
<div>
    <h1>one</h1>
    <h1>使用state数据：仓库中的数据</h1>
    <p>姓名：{{ $store.state.name }}</p>
    <p>年龄：{{ $store.state.age }}</p>
    <p>城市：{{ $store.state.user.userinfo.detail.city }}</p>


    <hr>
    <h1>getters处理数据，计算处理</h1>
    <div>城市：{{ $store.getters.get_city}}</div>
    <div>平均数：{{ $store.getters.get_ava}}</div>

    <hr>
    <h1>mutaions同步修改age</h1>
    <button @click="changeAge">同步修改</button>

    <hr>
    <h1>actions异步修改age</h1>
    <button @click="asyncChangeAge">异步修改</button>
   
</div>
</template>

<script>
export default {
    mounted(){
        console.log(this.$store);
    },
    methods:{
        changeAge(){
            //mutaions同步修改age,调用store的commit触发修改数据的方法
            this.$store.commit("mutation_age",1)
        },
        asyncChangeAge(){
            //actions异步修改age，调用store的dispatch排序才能触发actions里面的方法
            this.$store.dispatch("action_age",2)
        }
    }
}
</script>

<style>

</style>